<template>
    <div>
        <avue-input-icon v-model="form" placeholder="请选择图标" :icon-list="iconList"></avue-input-icon>

        <el-card>
            <div slot="header" class="clearfix">
                <span>阿里图标</span>
                <el-button id="btnCopy" style="float: right; padding: 3px 0" type="text" v-clipboard:copy="form"
                    v-clipboard:success="onCopy">点击复制</el-button>
            </div>
            {{form}}
        </el-card>
    </div>
</template>

<script>
    import icons from '@/utils/iconList.js';
    export default {
        data() {
            return {
                form: 'el-icon-info',
                iconList: [{
                    label: '阿里图标',
                    list: icons
                }, {
                    label: '方向图标',
                    list: ['el-icon-info', 'el-icon-back', 'el-icon-arrow-left', 'el-icon-arrow-down',
                        'el-icon-arrow-right', 'el-icon-arrow-up'
                    ]
                }, {
                    label: '符号图标',
                    list: ['el-icon-plus', 'el-icon-minus', 'el-icon-close', 'el-icon-check']
                }]
            }
        },
        created() {
            this.iconList[0].list = icons;
        },
        methods: {
            // 复制成功
            onCopy() {
                this.$message.success("复制成功!")
            }
        }

    }
</script>

<style>
</style>
